<template>
  <div class="cart">
    <div class="c1">
      购物车
      <!--地址的弹窗组件-->
      <span @click="goaddress"
        ><van-icon name="location-o" />选择你的收货地址</span
      >
      <van-action-sheet v-model="show" title="配送至">
        <div class="content">
          <!--地址组件  暂时还没写!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!弹窗完成立刻写-->
          <address-index></address-index>
        </div>
      </van-action-sheet>
    </div>
    <!-- 如果islogin显示的是登陆状态，那么就显示购物车的详细信息，
    否则就显示下方的查看购物车按钮 -->

    <!-- 购物车的内容，后期需要改动 -->
    <span v-if="$store.state.islogin">{{ data }}</span>
    <!-- 登陆后隐藏该部分内容 -->
    <div v-else>
      <van-empty
        class="custom-image"
        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        description="挑你喜欢的装进购物车">
      <span @click="gomy">看看收藏</span>
      </van-empty>
    </div>

    <div>
      <van-icon name="like-o" color="#c0ffeb" size="25"/>
      <span>快点来看看</span>
      <van-icon name="gift-o" color="#d9d9fe" size="25"/>
    </div>
    <!-- 随机展示部分喜欢的内容 -->
    <div>
      <span></span>
    </div>

    <Tabbar />
  </div>
</template> 

<script>
import Tabbar from "../components/common/Tabbar.vue";
import AddressIndex from "./AddressIndex.vue";
// 不引入直接写底层的this.'$store.state.islogin 引入直接写this.islogin
import { mapState } from "vuex";
export default {
  data() {
    return {
      show: false,
      data: "",
    };
  },
  // name: "Cart",
  components: { Tabbar, AddressIndex },
  computed: {
    // store  vuex引入数据
    ...mapState["islogin"],
  },
  mounted() {
    this.cart();
  },
  methods: {
    // 使用vant弹窗组件
    beforeClose(action, close) {
      console.log(action);
      // 判断点击状态 点击确认 跳转到登录状态
      if (action === "confirm") {
        this.$router.push("/login");
        close();
      } else {
        // 点击取消关闭窗口 停留在原页面
        close();
      }
    },
    gomy() {
      // 如果不是登录状态
      if (!this.$store.state.islogin) {
        this.$messagebox("请先登录，即将跳转...").then(() => {
          this.$router.push("/login");
        });
      }
    },
    cart() {
      const url = "http://127.0.0.1:3000/product/list";
      this.axios.get(url).then((res) => {
        // this.axios.get(url, { fid: 101}).then((res)
        console.log(res);
        this.data = res.data;
      });
    },
    goaddress() {
      if (!this.$store.state.islogin) {
        this.$messagebox("请先登录!").then(() => {
          this.$router.push("/login");
        });
      } else {
        this.show = true;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.cart {
  user-select: none;
  .c1 {
    top: 0;
    height: 12vw;
    width: 100%;
    color: #333333;
    // font-weight: bold;
    font-size: 25px;
    text-align: center;
    line-height: 12vw;

    background-image: linear-gradient(to right, #c0ffeb, #d9d9fe);

    span {
      font-size: 15px;
    }
  }
}
.custom-image .van-empty__image {
    width: 90px;
    height: 90px;
  }
</style>